<template>
  <div className="row">

    <!--        页头-->
    <div class="col-12 head1">
      <card>
        <div class="row" >
          <span class="deco"></span>
          <h2 class="clearMargin">面向对象程序设计（Java）</h2>

          <!-- 添加按钮 -->
          <a href="#/detail-add" target="_blank" class="card-img-top" style="margin-top: -2.5rem">
            <el-button style="margin-right: 1rem;margin-left: 59rem" type="primary" icon="el-icon-edit">点击添加课程</el-button>
          </a>

        </div>
      </card>
    </div>

    <div class="col-12">
      <card>
        <div style="height: auto;">
<!--          <h3 class="card-title"><i class="tim-icons icon-book-bookmark "></i> 课程管理</h3>-->


          <div class="row">

            <!--添加按钮-->
<!--              <a href="#/detail-add" target="_blank" class="card-img-top">-->
<!--                <base-button class="animation-on-hover" type="primary">点击添加课程</base-button>-->
<!--              </a>-->

            <div class="col-lg-3 col-xs-6 card-parent" v-for="item in courseItems " :key="item.id">

              <card class="card" style="width: 96%;margin-bottom: -1rem;">

                <a href="#/detail-edit" target="_blank" class="card-img-top">
                  <img slot="image" class="card-img-top"
                       :src="item.imageSrc"
                       alt="Card image cap">
                  <p class="card-text description">{{ item.description }}</p>
                </a>
              </card>
            </div>
          </div>
        </div>


        <div style="margin-top: 0rem; display: flex; align-items: center;">

          <!-- 分页按钮 -->
<!--          <el-pagination-->
<!--            style="color: #2E65F5;margin-left: 22rem"-->
<!--            background-->
<!--            layout="prev, pager, next"-->
<!--            :total="60"-->
<!--            class="rounded-pagination blue-pagination"-->
<!--          ></el-pagination>-->


          <!--小机器人-->
          <float-btn></float-btn>
          
        </div>

      </card>

    </div>
  </div>

</template>


<script>
import BaseTable from "../components/BaseTable.vue";
import Card from "../components/Cards/Card.vue";
import baseButton from "../components/BaseButton.vue";
import FloatBtn from "../components/FloatBtn.vue";

export default {
  methods: {
    setActiveIndex(index) {
      this.activeIndex = index;
    },
    getSvgImage(description) {
      // 根据描述生成对应的SVG图片
      const encodedDescription = encodeURIComponent(description);
      return `data:image/svg+xml,%3Csvg width='320' height='180'
xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EDrawing%3C/title%3E%3Cg%3E%3Ctitle%3ELayer%201%3C/title%3E%3Crect
id='svg_3' height='191.07122' widsth='382.49958' y='-2.5001' x='-5.00017' stroke-width='0' stroke='%23000'
fill='%233891ff'/%3E%3Ctext transform='matrix(1.28664 0 0 1.28664 -13.9226 -27.9567)' stroke='%23000'
xml:space='preserve' text-anchor='start' font-family='Noto Sans JP' font-size='24' id='svg_2' y='97.37594' x='22.47896'
stroke-width='0' fill='%23ffffff'%3E${encodedDescription}%3C/text%3E%3Crect id='svg_4' height='2.14285' width='23.21426'
y='101.42836' x='113.21399' stroke-width='0' stroke='%23000' fill='%233891ff'/%3E%3C/g%3E%3C/svg%3E`;
    }
  },
  components: {
    FloatBtn,
    BaseTable,
    Card,
    baseButton
  },
  props: {
    model: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      courseItems: [
        {
          id: 0,
          imageSrc: require("@/assets/img/Java.png"),
          description: "面向对象程序设计"
        },
        {
          id: 1,
          imageSrc: require("@/assets/img/python教程,8天python从入门到精通,学python看这套就够了.1429969622.png"),
          description: "Python基础应用"
        },
        // {
        //   id: 2,
        //   imageSrc: require("@/assets/img/离散数学_东北大学(全69讲).144255360.jpeg"),
        //   description: "离散数学 东北大学"
        // },
        {
          id: 3,
          imageSrc: require("@/assets/img/算法设计与分析_-_北航童咏昕教授.367057689.png"),
          description: "算法设计与分析"
        },
        {
          id: 4,
          imageSrc: require("@/assets/img/华为公司终于将Python整理成了漫画书.png"),
          description: "华为终于将Python整理成…"
        },
        {
          id: 5,
          imageSrc: require("@/assets/img/Java EE应用开发.jpg"),
          description: "Java EE应用开发"
        },
        {
          id: 7,
          imageSrc: require("@/assets/img/数据结构.jpg"),
          description: "数据结构"
        },

        {
          id: 6,
          imageSrc: require("@/assets/img/创业基础.png"),
          description: "创业基础"
        },
        {
          id: 7,
          imageSrc: require("@/assets/img/概率论与数理统计A.jpg"),
          description: "软件工程经济"
        },
        {
          id: 8,
          imageSrc: require("@/assets/img/交互英语.png"),
          description: "WEB前端技术实践"
        },
        // {
        //   id: 9,
        //   imageSrc: require("@/assets/img/中国共产党简史.png"),
        //   description: "中国共产党简史"
        // },
        {
          id: 6,
          imageSrc: require("@/assets/img/面向对象程序设计（Java）.png"),
          description: "面向对象程序设计"
        },
        // {
        //   id: 6,
        //   imageSrc: require("@/assets/img/离散数学_东北大学(全69讲).144255360.jpeg"),
        //   description: "离散数学 东北大学"
        // },
        // {
        //   id: 7,
        //   imageSrc: require("@/assets/img/算法设计与分析_-_北航童咏昕教授.367057689.png"),
        //   description: "算法设计与分析"
        // },
        //
        // {
        //   id: 8,
        //   imageSrc: require("@/assets/img/华为公司终于将Python整理成了漫画书.png"),
        //   description: "华为终于将Python整理成…"
        // },{
        //   id: 5,
        //   imageSrc: require("@/assets/img/python教程,8天python从入门到精通,学python看这套就够了.1429969622.png"),
        //   description: "Python基础应用"
        // },
        // {
        //   id: 8,
        //   imageSrc: require("@/assets/img/华为公司终于将Python整理成了漫画书.png"),
        //   description: "华为终于将Python整理成…"
        // },
      ],
    }
  }
}
</script>

<style scoped>
.card-title {
  margin-bottom: 0.2rem !important;
  font-weight: 400 !important;
}
label.btn.btn-sm.btn-primary.btn-simple {
  height: 1.8rem;
  font-size: 14px;
}
</style>
